<!--
 * @Descripttion: 交易设置
 * @Author: xiao li
 * @Date: 2020-09-28 15:24:24
 * @LastEditors: xiao li
 * @LastEditTime: 2022-09-14 14:20:58
-->
<template>
  <div class="lb-system-transaction">
    <top-nav />
    <div class="page-main">
      <lb-tips>
        系统默认用户订单处于待核销状态或完成订单后24小时内可申请退款
      </lb-tips>
      <el-form
        @submit.native.prevent
        :model="subForm"
        ref="subForm"
        :rules="subFormRules"
        label-width="120px"
      >
        <el-form-item label="转账方式" prop="company_pay">
          <el-radio-group v-model="subForm.company_pay">
            <el-radio :label="1">企业转账</el-radio>
            <el-radio :label="2">商家转账</el-radio>
          </el-radio-group>
          <lb-tool-tips>用于提现</lb-tool-tips>
        </el-form-item>
        <el-form-item label="订单超时" prop="over_time">
          <el-input v-model.number="subForm.over_time" placeholder="请输入分钟">
            <template slot="append">分钟</template>
          </el-input>
          <lb-tool-tips
            >订单未支付超时时间，超时将自动取消订单，单位：分钟</lb-tool-tips
          >
        </el-form-item>
        <!-- <el-form-item label="服务倒计时" prop="service_cover_time">
          <el-input
            v-model.number="subForm.service_cover_time"
            placeholder="请输入分钟"
          >
            <template slot="append">分钟</template>
          </el-input>
          <lb-tool-tips
            >服务还有多久就结束时，需要语言播报提醒消费者，您的服务还有多久结束</lb-tool-tips
          >
        </el-form-item> -->
        <el-form-item label="最长预约" prop="max_day">
          <el-select v-model="subForm.max_day" placeholder="请选择">
            <el-option
              v-for="item in longOptions"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
          <lb-tool-tips>客户预约服务选择时间时可选择的时间期限</lb-tool-tips>
        </el-form-item>
        <el-form-item label="时长单位" prop="time_unit">
          <el-select v-model="subForm.time_unit" placeholder="请选择">
            <el-option
              v-for="item in timeOptions"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
          <lb-tool-tips>划分工作时间的时间单位</lb-tool-tips>
        </el-form-item>
        <el-form-item label="交易规则" prop="trading_rules">
          <lb-ueditor
            v-model="subForm.trading_rules"
            :destroy="true"
            :ueditorType="3"
          ></lb-ueditor>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitForm">{{
            $t('action.submit')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    let validateInt = (rule, value, callback) => {
      if (!value || !/^\+?[0-9]*$/.test(value)) {
        callback(new Error('请输入非负整数'))
      } else {
        callback()
      }
    }
    return {
      longOptions: [{ id: 3, title: '近3天' }, { id: 5, title: '近5天' }, { id: 7, title: '近7天' }],
      timeOptions: [{ id: 30, title: '半小时' }, { id: 60, title: '一小时' }, { id: 120, title: '两小时' }],
      subForm: {
        company_pay: 1,
        over_time: '',
        service_cover_time: '',
        max_day: '',
        time_unit: '',
        trading_rules: ''
      },
      subFormRules: {
        company_pay: { required: true, type: 'number', message: '请选择转账方式', trigger: 'blur' },
        over_time: { required: true, validator: validateInt, trigger: 'blur' },
        max_day: { required: true, type: 'number', message: '请选择最长预约', trigger: 'blur' },
        time_unit: { required: true, type: 'number', message: '请选择时长单位', trigger: 'blur' }
      }
    }
  },
  created () {
    this.getFormInfo()
  },
  methods: {
    async getFormInfo () {
      let { code, data } = await this.$api.system.configInfo()
      if (code !== 200) return
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
    },
    submitForm () {
      this.$refs['subForm'].validate(valid => {
        if (valid) {
          let { subForm } = this
          this.$api.system.configUpdate(subForm).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-system-transaction {
  width: 100%;
  .page-main {
    padding: 20px;
    .el-form {
      width: 100%;
      .el-form-item {
        margin-bottom: 24px;
        .el-select,
        .el-input-number,
        .el-input {
          width: 300px;
        }
      }
      .last-form-item {
        margin-top: 30px;
      }
      .item-tips {
        margin-left: 120px;
        margin-bottom: 24px;
        color: #999999;
      }
    }
  }
}
</style>
